import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

import '../../public_util.dart';
import 'action.dart';
import 'state.dart';

Widget buildView(UserState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    // primary: false, //从状态栏开始布局
    // appBar: PreferredSize(preferredSize: Size(0.0, 0.0), child: Container()),
    body: Container(
      color: Color.fromRGBO(248, 248, 248, 1),
      child: ListView(
        padding: EdgeInsets.only(top: 0),
      //  physics:NeverScrollableScrollPhysics(),
        children: [
          _headerItem(),
          _priceItem(),
          _detailItem(),
          _bannerItem(),
          _vipItem(),
          _toolItem(),
        ],
      ),
    ),
  );
}

Widget _headerItem() {
  return Container(
    height: 198,
    padding: EdgeInsets.symmetric(horizontal: 15),
    decoration: BoxDecoration(
        image: DecorationImage(
      image: AssetImage('assets/images/user_center/user_head_bg.png'),
      fit: BoxFit.cover,
    )),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(53),
              child: Image.network(
                'https://img.alicdn.com/bao/uploaded/i1/389649927/O1CN016KZY2H2NCcQR8JxMw_!!389649927.jpg',
                width: 53,
                height: 53,
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(
              width: 12,
            ),
            Expanded(
              child: Column(
                children: [
                  Row(
                    children: [
                      Text(
                        '券后价',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 14,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Container(
                        height: 16,
                        padding: EdgeInsets.symmetric(horizontal: 4),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(16),
                          gradient: LinearGradient(
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                            colors: [
                              Color.fromRGBO(74, 54, 31, 1),
                              Color.fromRGBO(118, 75, 32, 1),
                            ],
                          ),
                        ),
                        child: Row(children: [
                          Image.asset(
                            "assets/images/user_center/user_zuan.png",
                            width: 12,
                            height: 11,
                          ),
                          SizedBox(
                            width: 2,
                          ),
                          Text(
                            "超级会员",
                            style: TextStyle(
                              fontSize: 9,
                              color: Color.fromRGBO(239, 210, 105, 1),
                            ),
                          ),
                        ]),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: "邀请码：",
                              style: TextStyle(
                                fontSize: 11,
                                color: Colors.white,
                              ),
                            ),
                            TextSpan(
                              text: 'ZW4R67N',
                              style: TextStyle(
                                fontSize: 11,
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                      ),
                      InkWell(
                        onTap: () {},
                        child: Container(
                          width: 22,
                          height: 22,
                          alignment: Alignment.center,
                          child: Image.asset(
                            "assets/images/user_center/user_head_eye.png",
                            width: 14,
                            height: 14,
                          ),
                        ),
                      ),
                      InkWell(
                        onTap: () {},
                        child: Container(
                          width: 22,
                          height: 22,
                          alignment: Alignment.centerLeft,
                          child: Image.asset(
                            "assets/images/user_center/user_head_copy.png",
                            width: 14,
                            height: 14,
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        "粉丝 1000",
                        style: TextStyle(
                          fontSize: 11,
                          color: Colors.white,
                        ),
                      ),
                      SizedBox(
                        width: 13,
                      ),
                      Text(
                        "积分 1000",
                        style: TextStyle(
                          fontSize: 11,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            GestureDetector(
              onTap: () {},
              child: Image.asset(
                "assets/images/user_center/user_msg.png",
                width: 24,
              ),
            ),
            SizedBox(
              width: 10,
            ),
            GestureDetector(
              onTap: () {},
              child: Image.asset(
                "assets/images/user_center/user_setting.png",
                width: 24,
              ),
            ),
          ],
        ),
        Container(
          height: 31,
          margin: EdgeInsets.symmetric(vertical: 7),
          padding: EdgeInsets.only(left: 9, right: 12),
          decoration: BoxDecoration(
            image: DecorationImage(
                image:
                    AssetImage("assets/images/user_center/user_head_hybg.png"),
                fit: BoxFit.fill),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Image.asset(
                "assets/images/user_center/user_zuan_show.png",
                width: 24,
                height: 23,
              ),
              SizedBox(
                width: 2,
              ),
              Expanded(
                child: Text(
                  '升级运营商获得更多权益',
                  style: TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.bold,
                    color: Color.fromRGBO(62, 61, 72, 1),
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              GestureDetector(
                onTap: () {},
                child: Row(
                  children: [
                    Text(
                      "去升级 ",
                      style: TextStyle(
                        fontSize: 11,
                        color: Color.fromRGBO(163, 117, 68, 1),
                      ),
                    ),
                    Image.asset(
                      "assets/images/user_center/user_gengduo.png",
                      width: 5,
                      height: 6,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Container(
          height: 50,
          padding: EdgeInsets.only(
            left: 20,
            right: 10,
          ),
          decoration: BoxDecoration(
            color: Color.fromRGBO(54, 48, 48, 1),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
            ),
          ),
          child: Row(
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      children: [
                        Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: "余额  ",
                                style: TextStyle(
                                  fontSize: 13,
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              TextSpan(
                                text: '￥10000',
                                style: TextStyle(
                                  fontSize: 16,
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              WidgetSpan(
                                child: GestureDetector(
                                  onTap: () {},
                                  child: Container(
                                    padding: EdgeInsets.only(bottom: 2, left: 5),
                                    child: Image.asset(
                                      "assets/images/user_center/user_head_qh.png",
                                      width: 12,
                                      height: 12,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        Image.asset(
                          "assets/images/user_center/user_head_ld.png",
                          width: 7,
                          height: 8,
                        ),
                        Text(
                          " 每月23号可提现上月结算收益 ",
                          style: TextStyle(
                            fontSize: 10,
                            color: Color.fromRGBO(250, 230, 192, 1),
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(top: 3),
                          child: Image.asset(
                            "assets/images/user_center/user_gengduo.png",
                            width: 5,
                            height: 7,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              GestureDetector(
                onTap: () {},
                child: Container(
                  height: 22,
                  padding: EdgeInsets.symmetric(horizontal: 8),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(255, 229, 178, 1),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(
                    "立即提现",
                    style: TextStyle(
                      fontSize: 11,
                      color: Color.fromRGBO(62, 61, 72, 1),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

Widget _priceItem() {
  return Container(
    margin: EdgeInsets.fromLTRB(15, 0, 15, 10),
    height: 101,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
      color: Colors.white,
    ),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: _priceContent('3629', '今日预估'),
              ),
              Container(
                height: 20,
                width: 0.5,
                color: Color.fromRGBO(241, 241, 241, 1),
              ),
              Expanded(
                child: _priceContent('59996', '本月预估'),
              )
            ],
          ),
        ),
        Container(
          height: 0.5,
          color: Color.fromRGBO(241, 241, 241, 1),
        ),
        Container(
          margin: EdgeInsets.symmetric(vertical: 11),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: '上月预估',
                      style: TextStyle(
                        fontSize: 11,
                        color: Color.fromRGBO(119, 119, 121, 1),
                      ),
                    ),
                    TextSpan(
                      text: '￥',
                      style: TextStyle(
                        fontSize: 9,
                        color: Color.fromRGBO(213, 153, 104, 1),
                      ),
                    ),
                    TextSpan(
                      text: '1223031',
                      style: TextStyle(
                        fontSize: 13,
                        color: Color.fromRGBO(213, 153, 104, 1),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: '上月收货',
                      style: TextStyle(
                        fontSize: 11,
                        color: Color.fromRGBO(119, 119, 121, 1),
                      ),
                    ),
                    TextSpan(
                      text: '￥',
                      style: TextStyle(
                        fontSize: 9,
                        color: Color.fromRGBO(213, 153, 104, 1),
                      ),
                    ),
                    TextSpan(
                      text: '122393',
                      style: TextStyle(
                        fontSize: 13,
                        color: Color.fromRGBO(213, 153, 104, 1),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

Widget _detailItem() {
  return Container(
    margin: EdgeInsets.symmetric(horizontal: 15),
    height: 80,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(10)),
      color: Colors.white,
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: _detailContent(
              'assets/images/user_center/meshouyi.png', '收益'),
        ),
        Expanded(
          child: _detailContent(
              'assets/images/user_center/medingdan.png', '订单'),
        ),
        Expanded(
          child: _detailContent(
              'assets/images/user_center/mefensi.png', '粉丝'),
        ),
        Expanded(
          child: _detailContent(
              'assets/images/user_center/meyaoqing.png', '邀请'),
        ),
      ],
    ),
  );
}

Widget _bannerItem() {
  List imgList = [
    "https://img.gzzhitu.com/zhitu-api/1622894340690701.jpg",
    "https://img.alicdn.com/i2/1880087221/O1CN01IJAyP023DGf93Pt9D_!!1880087221.jpg",
    "https://img.alicdn.com/i1/1880087221/O1CN01QxTwG323DGZdjc6p0_!!1880087221.jpg",
    "https://img-haodanku-com.cdn.fudaiapp.com/cc84e86082b70b10df42b2c22f04d0a5.png"
  ];
  return Container(
    margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
    height: 80,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(6)),
      color: Colors.white,
    ),
    child: Swiper(
      itemBuilder: (BuildContext context, int index) {
        return ClipRRect(
          borderRadius: BorderRadius.circular(6),
          child: Image.network(
            imgList[index],
            fit: BoxFit.cover,
          ),
        );
      },
      itemCount: 4,
      pagination: SwiperPagination(),
      autoplay: true,
      onTap: (int index) {},
    ),
  );
}

Widget _vipItem() {
  return Container(
    margin: EdgeInsets.symmetric(horizontal: 15),
    height: 129,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(10)),
      color: Colors.white,
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            margin: EdgeInsets.only(top: 10, bottom: 10, left: 12),
            child: Text(
              '会员专享',
              style: TextStyle(
                fontSize: 13,
                color: Color.fromRGBO(62, 61, 72, 1),
                fontWeight: FontWeight.bold,
              ),
            )),
        Container(
          height: 0.6,
          color: Color.fromRGBO(241, 241, 241, 1),
        ),
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: _vipContent(
                    'assets/images/user_center/tiantianhongbao.png',
                    '天天领红宝',
                    '百元现金派送中'),
              ),
              Container(
                width: 0.5,
                color: Color.fromRGBO(241, 241, 241, 1),
                margin: EdgeInsets.symmetric(vertical: 10),
              ),
              Expanded(
                child: _vipContent(
                    'assets/images/user_center/yunfadan.png', '云发单', '轻松分享'),
              ),
              Container(
                width: 0.5,
                color: Color.fromRGBO(241, 241, 241, 1),
                margin: EdgeInsets.symmetric(vertical: 10),
              ),
              Expanded(
                child: _vipContent(
                    'assets/images/user_center/baiteshenghuo.png',
                    '锁粉神速',
                    '补贴福利多'),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

Widget _toolItem() {
  List imgTitleList = [
    {
      'title': '新人教程',
      'img': 'assets/images/user_center/mexinrenjiaochneg.png',
    },
    {
      'title': '推广规范',
      'img': 'assets/images/user_center/metuiguang.png',
    },
    {
      'title': '我的收藏',
      'img': 'assets/images/user_center/meshoucang.png',
    },
    {
      'title': '智能转链',
      'img': 'assets/images/user_center/mezhinneg.png',
    },
    {
      'title': '关于我们',
      'img': 'assets/images/user_center/meguanyu.png',
    },
    {
      'title': '设置微信号',
      'img': 'assets/images/user_center/meweixinhao.png',
    },
    {
      'title': '用户协议',
      'img': 'assets/images/user_center/meyuhu.png',
    },
    {
      'title': '隐私政策',
      'img': 'assets/images/user_center/meyisi.png',
    },
    {
      'title': '任务中心',
      'img': 'assets/images/user_center/merenwu.png',
    },
    {
      'title': '设置',
      'img': 'assets/images/user_center/meshezhi.png',
    }
  ];

  List imgTitleList1 = [
    {
      'title': '新人教程',
      'img': 'assets/images/user_center/mexinrenjiaochneg.png',
    },
    {
      'title': '推广规范',
      'img': 'assets/images/user_center/metuiguang.png',
    },
    {
      'title': '我的收藏',
      'img': 'assets/images/user_center/meshoucang.png',
    },
    {
      'title': '智能转链',
      'img': 'assets/images/user_center/mezhinneg.png',
    },
    {
      'title': '关于我们',
      'img': 'assets/images/user_center/meguanyu.png',
    },
    {
      'title': '设置微信号',
      'img': 'assets/images/user_center/meweixinhao.png',
    },
    {
      'title': '用户协议',
      'img': 'assets/images/user_center/meyuhu.png',
    },
    {
      'title': '隐私政策',
      'img': 'assets/images/user_center/meyisi.png',
    }
  ];
  return Container(
    margin: EdgeInsets.fromLTRB(15, 10, 15, 20),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(10)),
      color: Colors.white,
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            margin: EdgeInsets.only(top: 10, bottom: 10, left: 12),
            child: Text(
              '我的工具',
              style: TextStyle(
                fontSize: 13,
                color: Color.fromRGBO(62, 61, 72, 1),
                fontWeight: FontWeight.bold,
              ),
            )),
        Container(
          height: 0.6,
          color: Color.fromRGBO(241, 241, 241, 1),
        ),
        Container(
            margin: EdgeInsets.symmetric(vertical: 10),
          child: SingleChildScrollView(
            scrollDirection:Axis.horizontal,
            child:Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children:imgTitleList
                        .asMap()
                        .map(
                          (index, value) {
                            return MapEntry(
                              index,
                              InkWell(
                                onTap: () {},
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Image.asset(
                                      value['img'],
                                     width: setWidth(88),
                                      height: 30,
                                    ),
                                    SizedBox(
                                      height: 7,
                                    ),
                                    Text(
                                      value['title'],
                                      style: TextStyle(
                                        fontSize: 11,
                                        color: Color.fromRGBO(119, 119, 121, 1),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                        )
                        .values
                        .toList(),
                  ),
                Row(
                  children:imgTitleList1
                      .asMap()
                      .map(
                        (index, value) {
                      return MapEntry(
                        index,
                        InkWell(
                          onTap: () {},
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Image.asset(
                                value['img'],
                                width: setWidth(88),
                                height: 30,
                              ),
                              SizedBox(
                                height: 7,
                              ),
                              Text(
                                value['title'],
                                style: TextStyle(
                                  fontSize: 11,
                                  color: Color.fromRGBO(119, 119, 121, 1),
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  )
                      .values
                      .toList(),
                ),
              ],
            )
          )
          // GridView.count(
          //   shrinkWrap: true,
          //   padding: EdgeInsets.only(top: 0),
          //   crossAxisCount: 4,
          //   physics: NeverScrollableScrollPhysics(),
          //   children: imgTitleList
          //       .asMap()
          //       .map(
          //         (index, value) {
          //           return MapEntry(
          //             index,
          //             InkWell(
          //               onTap: () {},
          //               child: Column(
          //                 mainAxisAlignment: MainAxisAlignment.center,
          //                 children: [
          //                   Image.asset(
          //                     value['img'],
          //                     width: 30,
          //                     height: 30,
          //                   ),
          //                   SizedBox(
          //                     height: 7,
          //                   ),
          //                   Text(
          //                     value['title'],
          //                     style: TextStyle(
          //                       fontSize: 11,
          //                       color: Color.fromRGBO(119, 119, 121, 1),
          //                     ),
          //                   ),
          //                 ],
          //               ),
          //             ),
          //           );
          //         },
          //       )
          //       .values
          //       .toList(),
          // ),
        ),
      ],
    ),
  );
}

Widget _detailContent(String img, String title) {
  return InkWell(
    onTap: () {},
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(
          img,
          width: 30,
          height: 30,
        ),
        SizedBox(
          height: 3,
        ),
        Text(
          title,
          style: TextStyle(
            fontSize: 12,
            color: Color.fromRGBO(62, 61, 72, 1),
          ),
        ),
      ],
    ),
  );
}

Widget _vipContent(String img, String title, String title1) {
  return InkWell(
    onTap: () {},
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(
          img,
          width: 55,
          height: 35,
        ),
        SizedBox(
          height: 2,
        ),
        Text(
          title,
          style: TextStyle(
            fontSize: 13,
            color: Color.fromRGBO(62, 61, 72, 1),
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          title1,
          style: TextStyle(
            fontSize: 11,
            color: Color.fromRGBO(119, 119, 121, 1),
          ),
        ),
      ],
    ),
  );
}

Widget _priceContent(String title, String title1) {
  return InkWell(
    onTap: () {},
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text.rich(
          TextSpan(
            children: [
              TextSpan(
                text: '￥',
                style: TextStyle(
                  fontSize: 11,
                  color: Color.fromRGBO(62, 61, 72, 1),
                ),
              ),
              TextSpan(
                text: title,
                style: TextStyle(
                  fontSize: 17,
                  color: Color.fromRGBO(62, 61, 72, 1),
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
        SizedBox(
          height: 2,
        ),
        Text(
          title1,
          style: TextStyle(
            fontSize: 11,
            color: Color.fromRGBO(62, 61, 72, 1),
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),
  );
}
